<template>
  <div id="menu-management" class="container">
    <table-filter>
      <el-input
        placeholder="请输入菜单名称"
        clearable
        @clear="(eaDialog.$data.filteredList = null) && search()"
        v-model="searchVal"
      >
      </el-input>
      <el-button plain type="warning" @click="search">查询 </el-button>
    </table-filter>
    <el-row>
      <el-button plain type="primary" @click="showEaDialog = true"
        >添加一级菜单
      </el-button>
    </el-row>
    <data-table
      ref="dtb"
      custom-list
      :api-setting="apiSetting"
      :offset-top="140"
      row-key="menuid"
      @processData="processData"
    >
      <el-table-column prop="menuname" label="菜单名称" width="140" />
      <el-table-column prop="menuid" label="菜单ID" width="80" />
      <el-table-column
        prop="url"
        label="URL"
        width="230"
        show-overflow-tooltip
      />
      <el-table-column
        prop="description"
        label="描述"
        show-overflow-tooltip
      />
      <el-table-column label="更新时间" width="170" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.updateDate | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column prop="updatePerson" label="更新人" width="90" />
      <el-table-column label="创建时间" show-overflow-tooltip width="170">
        <template slot-scope="{ row }">
          {{ row.createTime | formatterDate }}
        </template>
      </el-table-column>
      <el-table-column prop="createPerson" label="创建人" width="90" />
      <el-table-column label="状态" width="145">
        <template slot-scope="{ row }">
          <el-switch
            @change="switchMenuStatus(row)"
            v-model="row.isEnable"
            :active-value="true"
            :inactive-value="false"
            active-text="启用"
            inactive-text="禁用"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="{ row }">
          <el-button
            v-if="!row.parentid"
            @click="addSubMenu(row)"
            type="text"
            size="small"
            >添加二级菜单
          </el-button>
          <el-button @click="edit(row)" type="text" size="small"
            >编辑
          </el-button>
          <el-button
            @click="
              delRow(`/sys/manage/openAndCloseMenu/${row.menuid}`, '菜单')
            "
            type="text"
            size="small"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <ea-menu
      ref="eaDialog"
      :show.sync="showEaDialog"
      @on-reload="dtb.loadData()"
    ></ea-menu>
  </div>
</template>

<script>
import EaMenu from "./components/EaMenu";
import menu from "@/mixins/business/menu";
import eaDialog from "@/mixins/refs/eaDialog";
import dtb from "@/mixins/refs/dtb";
import deleteRow from "@/mixins/dataTable/deleteRow";

export default {
  name: "MenuManagement",
  components: { EaMenu },
  mixins: [deleteRow, menu, eaDialog, dtb],
  data() {
    return {
      searchVal: "",
      apiSetting: {
        method: "get",
        url: "/sys/manage/getMenuList"
      }
    };
  },
  methods: {
    processData(res, callback) {
      const { firstMenu, secondLevelMenu } = res;
      callback(this.mergeMenu(firstMenu, secondLevelMenu));
    },
    addSubMenu(row) {
      this.showEaDialog = true;
      this.eaDialog.$data.parentMenu = {
        name: row.menuname,
        id: row.menuid
      };
    },
    edit(row) {
      this.axios.get(`/sys/manage/getMenuById/${row.menuid}`).then(res => {
        this.showEaDialog = true;
        this.eaDialog.$data.type = "edit";
        this.$nextTick(() => {
          this.eaDialog.$data.singleData = res;
        });
      });
    },
    switchMenuStatus({ isEnable, menuid, menuname }) {
      this.axios
        .put(`/sys/manage/openAndCloseMenu/${isEnable}/${menuid}`)
        .then(res => {
          this.$notify.success(
            `更改菜单【${menuname}】状态为【${
              isEnable ? "启用" : "禁用"
            }】成功！`
          );
          this.dtb.loadData();
        });
    },
    search() {
      this.dtb.$data.filteredList = this.filterMenu(
        this.dtb.$data.list,
        this.searchVal
      );
    }
  }
};
</script>

<style scoped></style>
